<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登 录</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet" />
    <style>
        html, body {
            padding: 0px;
            margin: 0px;
            height: 100%;
            background-color: #555555;
        }

        #bg {
            width: 100%;
            height: 100%;
            margin: 0px;
            background-color: #606060;
            padding-top: 100px;
        }

        #bg2 {
            width: 100%;
            height: 100%;
            margin: 0px;
            background-image: url(images/img_back3.jpg);
        }

        #mydiv {
        }

        #myForm {
            background-color: #555555;
        }
    </style>
</head>
<body id="mybody">
    <div id="bg2">
        <div id="bg">
            <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4" id="mydiv">
                <div class="login-panel panel panel-default">
                    <div class="panel-heading">
                        <h3>登录</h3>
                    </div>
                    <div class="panel-body">
                        <form role="form">
                            <fieldset>
                                <div class="form-group">
                                    <input class="form-control" placeholder="邮箱或手机号" name="email" type="email" autofocus="" id="user_input">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="密码" name="password" type="password" value="" id="password_input">
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="remember" type="checkbox" value="Remember Me">记住我
                                    </label>
                                </div>

                                <div class="dropdown">
                                    <button type="button" class="btn btn-primary" id="dropdownMenu1"
                                        data-toggle="dropdown">确定 </button>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                        <li role="presentation">
                                            <a role="menuitem" tabindex="-1" id="user_li">用户</a>
                                        </li>
                                        <li role="presentation">
                                            <a role="menuitem" tabindex="-1" id="doctor_li">监护</a>
                                        </li>
                                        <li role="presentation">
                                            <a role="menuitem" tabindex="-1" id="admin_li">管理员
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div id="short" class="alert alert-warning">请填写完整再登录！</div>
                                <div id="error" class="alert alert-warning">发生错误，请检查邮箱密码以及登录类型！</div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>


<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
     var currentIndex = 2; var alpha=100 ; var form ;
         var time_change = 0;  var speed = -1;

        function GetJsonData() {
            var json = {
            "name": $("#user_input").val(),
            "pass": $("#password_input").val(),
            };
            return json;
        } 

        function changeBg(){
            var bgImgs = ["images/img_back1.jpg", "images/img_back2.jpg", "images/img_back3.jpg", "images/img_back4.jpg"];
            var obj = document.getElementById('bg');
            var obj2 = document.getElementById('bg2');
            var form = document.getElementById('mydiv');
            form.style.opacity = 100/100;
            form.style.filter = 'alpha(opacity=100)';
            if(0)
            {
                alert(input);
                alpha = 100;		
            }
            else{
                alpha += speed;
                time_change++;
                obj.style.opacity = alpha/100;
                obj.style.filter = 'alpha(opacity='+alpha+')';
                if(alpha>100){
                    speed = -1;
                    currentIndex += 1;
                    if (currentIndex >= 4){
                        currentIndex = 0;} 	
                    obj2.style.backgroundImage="url("+bgImgs[currentIndex]+")";
		 
                }
                else if((alpha<70)&&(alpha>50)&&(speed==-1)){
                    speed = -0.5;
                }
                else if((alpha<70)&&(alpha>50)&&(speed==0.5)){
                    speed = 1;
                }
                else if(alpha<50){
                    speed = 0.5;
                }
            }
            if(time_change==65){

            }
        }
         $("#user_li").click(function () {
            error("user");
        });
        $("#doctor_li").click(function () {
            error("doctor");
        });
        $("#admin_li").click(function () {
            error("admin");
        }); 
        function error(data) {

            if (($("#user_input").val() == "邮箱或手机号") || ($("#password_input").val() == "密码"))
            {
                $("#short").show();
                $("#short").hide(5000);
            }
            else {
                $.post("cgi-bin/pass.cgi",JSON.stringify(GetJsonData()), function (data) {
                    var serverData = data.split(":");
                   /*alert(data);*/
                    if (serverData[0] == "OK")
                    {
                       alert(data);
                       // window.location.href = serverData[1];
                    }
                    else {
                        $("#error").show();
                        $("#error").hide(5000);
                    }
                });
            } 
        }

        window.setInterval(changeBg, 40); 
        $(window).load(function () {
            $("#error").hide();
            $("#short").hide();
        });
        </script>
</html>
